{extend name="template/base" /}
{block name="content"}
<div class="page-container">
    <form class="form form-horizontal" id="form" method="post" action="">
        <input type="hidden" name="id" value="{$vo.id ?? ''}">
        <br/>
        <div class="row cl">
            <label class="form-label col-sm-2">
                用户需求
            </label>
            <div class="col-sm-10">
                <p>{$vo.require_text??''}</p>
                <div>
                    {volist name="@$vo['require_photos']|get_photos" id="pt"}
                    <a href="http://{$Request.host}/public{$pt}" data-lightbox="example-1">
                        <img style="width: 25%" src="http://{$Request.host}/public{$pt}">
                    </a>
                    {/volist}
                </div>
            </div>
            <div class="col-sm-2"></div>
        </div>
        <hr/>
        <div class="row cl">
            <label class="form-label col-sm-2"><br/><span class="c-red"></span>商品配置</label>
            <div class="col-sm-10">
                <table class="table table-border table-bordered table-hover table-bg mt-20">
                    <thead>
                    <tr class="text-c">
                        <th width="50">{:sort_by('ID','id')}</th>
                        <th width="100">商品名称</th>
                        <th width="100">商品头像</th>
                        <th width="150">原始价格</th>
                        <th width="80">最新价格</th>
                        <th width="80">单位</th>
                        <th width="80">总数量</th>
                        <th width="60">个数</th>
                        <th width="50">操作</th>
                    </tr>
                    </thead>
                    <tbody id="select-show">

                    </tbody>
                </table>
            </div>
            <div class="col-sm-2"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-2"><br/><span class="c-red">直接报价</span><br/>(！！！有报价时，直接按报价进行交易)</label>
            <div class="col-sm-10">
               <input type="number" value="{$vo['total_fee']??'0.00'}" name="final_price" class="input-text" style="width: 50%" step="0.01">
            </div>
            <div class="col-sm-2"></div>
        </div>
        <div class="row cl">

            <div class="col-xs-2 col-sm-3 col-xs-offset-10 col-sm-offset-9">
                <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
        <hr/>
        <div class="row cl">
            <div class="form-label col-sm-2">
                <br/><br/><br/><br/><br/><br/><br/><br/>
                <button type="button" class="btn btn-primary radius" onclick="selectGoodsFun()">选择</button>
            </div>
            <div class="col-sm-10" id="select-box">

            </div>
            <div class="col-sm-2"></div>
        </div>


    </form>

</div>
<script>
    let storeId = {$vo['store_id']};
</script>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script>
    $(function () {
        $("[name='status'][value='{$vo.status ?? '1'}']").attr("checked",true);

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form").Validform({
            tiptype:2,
            ajaxPost:true,
            showAllError:true,
            callback:function(ret){
                ajax_progress(ret);
            }
        });
    })

    selectClick('');
    function selectClick(url){
        if(!url) url = '/admin/mk.goods/select';
        $.ajax(url,{
            type:'get',
            data: {sms_stores_id:storeId},
            success(data){
                $('#select-box').html(data);
                $('#lightbox').hide();
            }
        })
    }

    let selectAll = {};//用一个全局接收，方便后续插入进入，知道哪些已经存在
    function selectGoodsFun() {

        $('#select-box-body input').each(function () {
            let gid = $(this).val();
            if($(this).prop('checked')){
                var trObj = $(this).parent('td').parent('tr');
                //判断selectAll是否有，没有添加
                if(!selectAll[gid]){
                    selectAll[gid] = {};
                    selectAll[gid] = trObj.find('td');
                }
            }
        });
        sleGoodsShow();
    }
    function sleGoodsShow(){
        let html = '';
        for(let i in selectAll){
            let trObj = $
            html += '<tr>';
            html += '<td>'+$(selectAll[i][1]).html()+'</td>';
            html += '<td>'+$(selectAll[i][2]).html()+'</td>';
            html += '<td>'+$(selectAll[i][3]).html()+'</td>';
            html += '<td>'+$(selectAll[i][4]).html()+'</td>';
            html += '<td>'+$(selectAll[i][5]).html()+'</td>';
            html += '<td>'+$(selectAll[i][6]).html()+'</td>';
            html += '<td>'+$(selectAll[i][7]).html()+'</td>';
            html += '<td><input type="number" value="1" name="goods['+i+']"></td>';
            html += '<td><i class="iconfont" onclick="delLine(this,'+i+')">删除</i></td>';
            html += '</tr>';
        }
        $('#select-show').html(html);

    }

    function delLine(obj,gid) {
        $(obj).parent('td').parent('tr').remove();
        delete selectAll[gid];
    }


</script>
{/block}